<style>
  .head-container {
    padding: 10px 0 14px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 220px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .price-result-wrap .price-content:last-child {
    border-bottom: none;
  }
</style>

<section id="unit-mange-list" class="pl-24 pr-24">
  <hl-page-header title="单元管理"></hl-page-header>

  <div class="head-container relative">
    <div class="clearfix">
      <div class="flow">
        <p>项目</p>
        <hl-select :data="project" v-model="projectId" :width="220" @on-change="getGroupPrimaryData"></hl-select>
      </div>
      <div class="flow">
        <p>组合</p>
        <hl-cascader :selected="selectedGroupData" :width="260" :primary-data="groupOneData" :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup" @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
      </div>
      <div class="button-group" v-show="!isExtenseFlag">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="resetButton" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="clearfix mt-10" v-show="isExtenseFlag">
      <div class="flow">
        <p>楼栋</p>
        <hl-select :data="building" v-model="buildId" :width="180" @on-change="getFloorData"></hl-select>
      </div>
      <div class="flow">
        <p>楼层</p>
        <hl-select :data="floorData" v-model="floorId" :width="180"></hl-select>
      </div>
      <div class="flow">
        <p>单元类型</p>
        <hl-select :data="unitTypes" v-model="unitType" :width="180" @on-change="selUnitType"></hl-select>
      </div>
      <div class="button-group">
        <hl-button @on-click="search" size="mini">查询</hl-button>
        <hl-button @on-click="resetButton" size="mini">重置</hl-button>
      </div>
    </div>

    <div class="global_open_sign" @click="openSearch">
      <span v-if="!isExtenseFlag">更多筛选项</span>
      <span v-if="isExtenseFlag">收起筛选项</span>
    </div>
  </div>

  <div class="list br-4 global_table" style="border:1px solid #E5E5E5;" v-if="burentunits.length">
    <ul class="dy-flex l-h-40 text-center global_table_title">
      <li class="dy-fx-1">序</li>
      <li class="dy-fx-3">项目</li>
      <li class="dy-fx-2">楼栋</li>
      <li class="dy-fx-2">楼层</li>
      <li class="dy-fx-2">单元</li>
      <li class="dy-fx-2">单元类型</li>
      <li class="dy-fx-2 border-l">操作</li>
    </ul>
    <div>
      <ul class="dy-flex l-h-40 text-center border-t global_table_item" v-for="(item, index) in burentunits">
        <li class="dy-fx-1">{{index < 9 ? '0'+(index+1) : (index+1)}}</li>
        <li class="dy-fx-3">{{item.projectName || '--'}}</li>
        <li class="dy-fx-2">{{item.buildingName || '--'}}</li>
        <li class="dy-fx-2">{{item.floorName || '--'}}</li>
        <li class="dy-fx-2">{{item.unitName}}</li>
        <li class="dy-fx-2">{{item.unitType | businessTypev}}</li>
        <li class="dy-fx-2 border-l">
          <a :href="'#/unitEditFloor?fyId='+item.id+'&ddtab=true&projectId='+projectId" target="_blank">查看</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="user-page ptb-10 clearfix" v-show="burentunits.length">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
      <span>每页<hl-select :data="limit" v-model="pageSize" width="80" @on-change="fanye"></hl-select>条</span>
    </div>
    <div class="pull-right">
      <hl-pagination v-model="currentPage" :total="totalPage" @change="getSearchList"></hl-pagination>
    </div>
  </div>
</section>

<script src="modules/price/scripts/unit_list.js" charset="utf-8"></script>
